<nz-modal [(nzVisible)]="visible" nzTitle="" (nzOnCancel)="handleCancel()" (nzOnOk)="handleOk()"
  [nzOkLoading]="isOkLoading"[nzCancelText]="'EquipmentManagement.EquipmentManagement.Cancel'|translate" [nzOkText]="'EquipmentManagement.EquipmentManagement.Save'|translate" nzWidth="12rem" nzWrapClassName="vertical-center-modal" nzMask="false"
  [nzStyle]="{ top: '1rem',left:'1.2rem',width:'80%' }" class="addEquipment new-svg-color">

  <div nz-row>
    <div class="title" nz-col nzSpan="12"  style="background-color: #353c70 !important; border: none; color: white !important; ">
      <i class="iconfont icon-add" *ngIf="title==='Add_Equipment'"></i>
      <i class="iconfont icon-pen01" *ngIf="title!=='Add_Equipment'"  ></i>
      {{"EquipmentManagement.EquipmentManagement." + title | translate}}
    </div>
  </div>
  <form nz-form [formGroup]="equipmentInfoForm"
    style="background-color: #353c70 ;" class="addForm">
    <div nz-row nzType="flex">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24" nzRequired nzFor="id">
            {{"EquipmentManagement.EquipmentManagement.equipment_ID" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input [placeholder]="'' | translate" style="width:2.5rem" formControlName="id" id="id"  autocomplete="off"/>
            <nz-form-explain *ngIf="equipmentInfoForm.get('id')?.dirty && equipmentInfoForm.get('id')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="nextDate">
            {{"EquipmentManagement.EquipmentManagement.the_next_date" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <!-- <input nz-input [placeholder]="'' | translate" style="width:2.5rem" formControlName="nextDate"
              id="nextDate" /> -->
            <nz-date-picker formControlName="nextDate" style="width:2.5rem" id="nextDate"></nz-date-picker>
            <nz-form-explain
              *ngIf="equipmentInfoForm.get('nextDate')?.dirty && equipmentInfoForm.get('nextDate')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzType="flex">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="type">
            {{"EquipmentManagement.EquipmentManagement.equipment_Type" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <nz-select formControlName="type" style="width:2.5rem;" nzShowSearch nzAllowClear
              [nzPlaceHolder]="'' | translate" id="type">
              <nz-option *ngFor="let item of selectionList.Type" [nzLabel]="item.name" [nzValue]="item.value">
              </nz-option>
            </nz-select>
            <nz-form-explain *ngIf="equipmentInfoForm.get('type')?.dirty && equipmentInfoForm.get('type')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="supervision">
            {{"EquipmentManagement.EquipmentManagement.supervision_Engineers" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input [placeholder]="'' | translate" style="width:2.5rem" formControlName="supervision"     autocomplete="off"
              id="supervision" />
            <nz-form-explain
              *ngIf="equipmentInfoForm.get('supervision')?.dirty && equipmentInfoForm.get('supervision')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzType="flex">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="ip">
            {{"EquipmentManagement.EquipmentManagement.IP_adress" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input [placeholder]="'' | translate" type="text" style="width:2.5rem" formControlName="ip" id="ip" autocomplete="off" />
            <nz-form-explain *ngIf="equipmentInfoForm.get('ip')?.dirty && equipmentInfoForm.get('ip')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="installDate">
            {{"EquipmentManagement.EquipmentManagement.install_date" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <!-- <input nz-input [placeholder]="'' | translate" style="width:2.5rem" formControlName="installDate"
              id="installDate" /> -->
            <nz-date-picker formControlName="installDate" style="width:2.5rem" id="installDate"></nz-date-picker>
            <nz-form-explain
              *ngIf="equipmentInfoForm.get('installDate')?.dirty && equipmentInfoForm.get('installDate')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzType="flex">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="zoneID">
            {{"EquipmentManagement.EquipmentManagement.zone_ID" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input [placeholder]="'' | translate" type="number" style="width:2.5rem" formControlName="zoneID" id="zoneID"   autocomplete="off" />
            <nz-form-explain *ngIf="equipmentInfoForm.get('zoneID')?.dirty && equipmentInfoForm.get('zoneID')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="constructionUnit">
            {{"EquipmentManagement.EquipmentManagement.construction_unit" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input [placeholder]="'' | translate" style="width:2.5rem" formControlName="constructionUnit"  autocomplete="off"
              id="constructionUnit" />
            <nz-form-explain
              *ngIf="equipmentInfoForm.get('constructionUnit')?.dirty && equipmentInfoForm.get('constructionUnit')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzType="flex">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24" nzRequired nzFor="longitude">
            {{"EquipmentManagement.EquipmentManagement.longitude" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input [placeholder]="'' | translate" type="number" style="width:2.5rem" formControlName="longitude"
              id="longitude" />
              <i class="iconfont icon-dingwei" [ngStyle]="{'color':clickBtn==='eqtLatLng'?'#238ce6':''}"
              (click)="getGisPosition('eqtLatLng')"></i>
            <nz-form-explain
              *ngIf="equipmentInfoForm.get('longitude')?.dirty && equipmentInfoForm.get('longitude')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="constructionPerson">
            {{"EquipmentManagement.EquipmentManagement.construction_person" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input [placeholder]="'' | translate" style="width:2.5rem" formControlName="constructionPerson"  autocomplete="off"
              id="constructionPerson" />
            <nz-form-explain
              *ngIf="equipmentInfoForm.get('constructionPerson')?.dirty && equipmentInfoForm.get('constructionPerson')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzType="flex">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24" nzRequired nzFor="latitude">
            {{"EquipmentManagement.EquipmentManagement.latitude" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input [placeholder]="'' | translate" type="number" style="width:2.5rem" formControlName="latitude"
              id="latitude" />
              <i class="iconfont icon-dingwei" [ngStyle]="{'color':clickBtn==='eqtLatLng'?'#238ce6':''}"
              (click)="getGisPosition('eqtLatLng')"></i>
            <nz-form-explain
              *ngIf="equipmentInfoForm.get('latitude')?.dirty && equipmentInfoForm.get('latitude')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="roadName">
            {{"EquipmentManagement.EquipmentManagement.road_name" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input [placeholder]="'' | translate" style="width:2.5rem" formControlName="roadName"   autocomplete="off"
              id="roadName" />
            <nz-form-explain
              *ngIf="equipmentInfoForm.get('roadName')?.dirty && equipmentInfoForm.get('roadName')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
    </div>
    <div nz-row nzType="flex">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="direction">
            {{"EquipmentManagement.EquipmentManagement.Direction" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <nz-select formControlName="direction" style="width:2.5rem;" nzShowSearch nzAllowClear
              [nzPlaceHolder]="'' | translate" id="direction">
              <nz-option *ngFor="let item of selectionList.Direction" [nzLabel]="'EquipmentManagement.EquipmentManagement.'+item|translate" [nzValue]="item"></nz-option>
            </nz-select>
            <nz-form-explain
              *ngIf="equipmentInfoForm.get('direction')?.dirty && equipmentInfoForm.get('direction')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">

      </div>
    </div>
    <div nz-row nzType="flex">
      <div nz-col nzSpan="12">
        <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24"  nzFor="direction">
            {{"EquipmentManagement.EquipmentManagement.Photograph" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <div class="imgGroup">
              <itmp-img-upload [isChunkImageUpload]="true" (deleteOriginImg)="deleteOriginImg($event)" [avatarUrl]="Photograph&&Photograph[0]||''" [imgFormatLimit]="imgFormatLimit" (getUploadStatus)="getUploadStatus($event)" [imgUploadUrl]="eqt.apiUrl_equip_uploadChunkImg" (getImgData)="getImgData($event,0)"></itmp-img-upload>
              <itmp-img-upload [isChunkImageUpload]="true" (deleteOriginImg)="deleteOriginImg($event)" [avatarUrl]="Photograph&&Photograph[1]||''" [imgFormatLimit]="imgFormatLimit" (getUploadStatus)="getUploadStatus($event)" [imgUploadUrl]="eqt.apiUrl_equip_uploadChunkImg" (getImgData)="getImgData($event,1)"></itmp-img-upload>
              <itmp-img-upload [isChunkImageUpload]="true" (deleteOriginImg)="deleteOriginImg($event)" [avatarUrl]="Photograph&&Photograph[2]||''" [imgFormatLimit]="imgFormatLimit" (getUploadStatus)="getUploadStatus($event)" [imgUploadUrl]="eqt.apiUrl_equip_uploadChunkImg" (getImgData)="getImgData($event,2)"></itmp-img-upload>
            </div>
            <nz-form-explain style="color:#f5222d"
              *ngIf="equipmentInfoForm.get('url')?.dirty && equipmentInfoForm.get('url')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item>
      </div>
      <div nz-col nzSpan="12">

      </div>
    </div>
    <!-- <nz-form-item>
        <nz-form-label [nzSm]="9" [nzXs]="24" nzRequired nzFor="photograph">{{"EquipmentManagement.EquipmentManagement.Photograph" | translate}}</nz-form-label>
        <nz-form-control [nzSm]="15" [nzXs]="24">
            <input nz-input [placeholder]="'' | translate" style="width:2.5rem" formControlName="photograph" id="photograph" />
            <nz-form-explain *ngIf="equipmentInfoForm.get('photograph')?.dirty && equipmentInfoForm.get('photograph')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
        </nz-form-control>
    </nz-form-item> -->
    <!-- <nz-form-item>
          <nz-form-label [nzSm]="9" [nzXs]="24" nzRequired nzFor="direction">
            {{"EquipmentManagement.EquipmentManagement.Direction" | translate}}</nz-form-label>
          <nz-form-control [nzSm]="15" [nzXs]="24">
            <nz-select formControlName="direction" style="width:2.5rem;" nzShowSearch nzAllowClear
              [nzPlaceHolder]="'' | translate" id="direction">
              <nz-option *ngFor="let item of selectionList.Direction" [nzLabel]="item" [nzValue]="item"></nz-option>
            </nz-select>
            <nz-form-explain
              *ngIf="equipmentInfoForm.get('direction')?.dirty && equipmentInfoForm.get('direction')?.errors">
              {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
            </nz-form-explain>
          </nz-form-control>
        </nz-form-item> -->
    <!-- <nz-form-item>
            <nz-form-label [nzSm]="9" [nzXs]="24" nzRequired nzFor="status">
              {{"EquipmentManagement.EquipmentManagement.Status" | translate}}</nz-form-label>
            <nz-form-control [nzSm]="15" [nzXs]="24">
              <nz-select formControlName="status" style="width:2.5rem;" nzShowSearch nzAllowClear
                [nzPlaceHolder]="'' | translate" id="status">
                <nz-option *ngFor="let item of selectionList.Status" [nzLabel]="item" [nzValue]="item"></nz-option>
              </nz-select>
              <nz-form-explain *ngIf="equipmentInfoForm.get('status')?.dirty && equipmentInfoForm.get('status')?.errors">
                {{"EquipmentManagement.EquipmentManagement.The_input_is_not_valid" | translate}}
              </nz-form-explain>
            </nz-form-control>
          </nz-form-item> -->
  </form>
</nz-modal>
<nz-modal [(nzVisible)]="isForceVisible" nzTitle="{{'TrafficManagement.IncidentRecord.Cross region operation' | translate}}" (nzOnCancel)="FourchHandleCancel()" (nzOnOk)="ForceHandleOk()">
    <div>
      {{'TrafficManagement.IncidentRecord.Further operation, mandatory operation still available' | translate}}
    </div>
</nz-modal>